<template>
	<view class="con"> 
		<z-swiper v-model="list"  :options="options" ref="zSwiperRef" 
			 @slideChangeTransitionEnd="slideChangeTransitionEnd"
		>
			<z-swiper-item >
				<div class="page page1" @click.stop="slideTo()" @touchmove.stop="slideTo()">
					<view class="logo">
						<image :src="imgHost + '/statics/assets/a1.png'" style="height: 200rpx; margin-top: 100rpx;" mode="heightFix"></image>
					</view>
					<view class="jindu">
						<view :class="show==true?'t ac2':'t'">
							<view class="lefo">← 向左滑动</view>
						</view>
						<view class="m">
							<view class="pro" :style="'width:'+jindu +'%'">
								<view v-if="!show">{{jindu}}%</view>
							</view>
						</view>
						<view :class="show==true?'b ac1':'b'">
							<image :src="imgHost + '/statics/assets/a3.gif'" style="height: 84rpx; width: auto;" mode="heightFix"></image>
						</view>
					</view>
					<view :class="show==true?'wenan ac1':'wenan'">
						<image :src="imgHost + '/statics/assets/a4.jpg'" style="width: 100%;" mode="widthFix"></image>
					</view>
					
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div class="page page2">
					<view :class="active1 == 1?'bg wo':'bg'">
						<image :src="imgHost + '/statics/assets/b1.png'"  mode="widthFix"></image>
					</view>
					<view :class="active1 == 1?'bg1 wo1':'bg1'">
						<image :src="imgHost + '/statics/assets/scr.png'"  mode="widthFix"></image>
					</view>
					
					<view class="list">
						<view class="item">
							<image :src="imgHost + '/statics/assets/c1.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('男')">
							<image :src="imgHost + '/statics/assets/c2.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('女')">
							<image :src="imgHost + '/statics/assets/c3.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('MTF')">
							<image :src="imgHost + '/statics/assets/c4.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('FTM')">
							<image :src="imgHost + '/statics/assets/c5.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('酷儿')">
							<image :src="imgHost + '/statics/assets/c6.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item" @click.stop="page2next('无性别')">
							<image :src="imgHost + '/statics/assets/c7.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div :class="page3b == 1?'page page3 woro wo1a':'page page3 woro'">
					<view class="bg">
						<view class="item1">
							<image :src="imgHost + '/statics/assets/sle.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item5">
							<image :src="imgHost + '/statics/assets/sle.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					
						
						<view class="item9">
							<image :src="imgHost + '/statics/assets/sri.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<image :src="imgHost + '/statics/assets/sri.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					
						<view class="item3">
							<image :src="imgHost + '/statics/assets/fle.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item8">
							<image :src="imgHost + '/statics/assets/fle.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					</view>
					<view class="list">
						<view class="item">
							<image :src="imgHost + '/statics/assets/c8.png'" style="width: 100%; margin-top: 160rpx;" mode="widthFix"></image>
						</view>
						<view class="item" style="margin-top: 20rpx;">
							<image :src="imgHost + '/statics/assets/c9.png'" style="width: 100%;" mode="widthFix"></image>
							<image :src="imgHost + '/statics/assets/toTop.png'" class="toTop" style="width:185rpx; height: 149rpx;" mode="widthFix"></image> 
							<view class="text">
								<picker mode="date" :value="form.born" @change="page3next">
									<view>说起来，你是什么时候出生的呢？</view>
								</picker>
							</view>
						</view>
						
					</view>
					<view class="back" @click="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div :class="page3a == 1?'page page4 woro2 wo2a':'page page4 woro2'">
					
					<view class="bg">
						<image :src="imgHost + '/statics/assets/c12.png'"  mode="widthFix"></image>
					</view>
					<view class="list">
						<view class="item">
							<image :src="imgHost + '/statics/assets/c10.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<image :src="imgHost + '/statics/assets/c11.png'" style="width: 100%;" mode="widthFix"></image>
							<view class="text">
								<input type="text" v-model="form.job" placeholder="可以告诉我你的工作吗？" placeholder-style="color:#9a9797">
							</view>
						</view>
						<view class="item2">
							<image :src="imgHost + '/statics/assets/c11.png'" style="width: 100%;" mode="widthFix"></image>
							<view class="text"  @click.stop="page4next()">
								确定
							</view>
						</view>
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div class="page page5 woro3">
					<view class="bg">
						<image :src="imgHost + '/statics/assets/c14.png'"  mode="widthFix"></image>
						
					</view>
					<view :class="page3 == 1?'round wo':'round'">
						
					</view>
					<view class="list">
						<view class="item">
							<image :src="imgHost + '/statics/assets/c13.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<image :src="imgHost + '/statics/assets/c11.png'" style="width: 100%;" mode="widthFix"></image>
							<view class="text">
								<input type="text" v-model="form.interesting" placeholder="你空闲时候喜欢做什么呢？" placeholder-style="color:#9a9797">
							</view>
						</view>
						<view class="item2">
							<image :src="imgHost + '/statics/assets/c11.png'" style="width: 100%;" mode="widthFix"></image>
							<view class="text"  @click.stop="page5next()">
								确定
							</view>
						</view>
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div class="page page6">
					<view :class="page3 == 1?'bg wo':'bg'">
						<image :src="imgHost + '/statics/assets/b3.png'"  mode="widthFix"></image>
					</view>
					<view class="list">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/c15.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item">
							
							<picker mode="multiSelector" :range="multiRange" :value="[8,8,8,8]" @change.stop="onChange">
							      <view class="picker">
							        <image :src="imgHost + '/statics/assets/c17.png'" style="width: 100%;" mode="widthFix"></image>
							      </view>
							    </picker>
						</view>
						<view class="item" @click.stop="page6next(1)">
							<image :src="imgHost + '/statics/assets/c16.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<!--第6页位置-->
			<z-swiper-item>
				<!--第十页-->
				<div :class="page3 == 1?'page page9 woro3':'page page9'">
					
					<view class="list" :class="active == 6?'ac list':'list'">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/c35.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item4 ac4 itemtit">
							<image :src="imgHost + '/statics/assets/c36.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac1" @click.stop="page7next(0,'J')">
							<image :src="imgHost + '/statics/assets/c33.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac2" @click.stop="page7next(1,'P')">
							<image :src="imgHost + '/statics/assets/c34.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div :class="page8 == 1?'page page8 woro4':'page page8'">
					
					<view class="list" :class="active == 7?'ac list':'list'">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/c24.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac1" @click.stop="page8next(0,'E')">
							<image :src="imgHost + '/statics/assets/c25.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<view class="l ac3">
								<image :src="imgHost + '/statics/assets/c27.png'" mode="widthFix"></image>
							</view>
							<view class="r ac4">
								<image :src="imgHost + '/statics/assets/c27.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="item item3 ac2" @click.stop="page8next(1,'I')">
							<image :src="imgHost + '/statics/assets/c26.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div :class="page3 == 1?'page page9 woro2':'page page9'">
					
					<view class="list" :class="active == 8?'ac list':'list'">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/c28.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac1" @click.stop="page9next(0,'S')">
							<image :src="imgHost + '/statics/assets/c30.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac2" @click.stop="page9next(1,'N')">
							<image :src="imgHost + '/statics/assets/c31.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item4 ac4">
							<image :src="imgHost + '/statics/assets/c29.png'"  mode="widthFix"></image>
						</view>
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<z-swiper-item>
				<div class="page page8">
					
					<view class="list" :class="active == 9?'ac list':'list'">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/c32.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item item3 ac1" @click.stop="page10next(0,'F')">
							<image :src="imgHost + '/statics/assets/c_64.jpg'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<view class="l ac3">
								<image :src="imgHost + '/statics/assets/c27.png'" mode="widthFix"></image>
							</view>
							<view class="r ac4">
								<image :src="imgHost + '/statics/assets/c27.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="item item3 ac2" @click.stop="page10next(1,'T')">
							<image :src="imgHost + '/statics/assets/c_67.jpg'" style="width: 100%;" mode="widthFix"></image>
						</view>
						
					</view>
					<view class="back" @click.stop="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item>
			<!--第十页位置-->
			<!-- <z-swiper-item> 
				<div :class="page3 == 1?'page page7 woro':'page page7'"> 
					<view  :class="active == 10?'ac list':'list'">
						<view class="item itemtit">
							<image :src="imgHost + '/statics/assets/e18.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="textarea item ac6">
							<u--textarea :placeholderStyle="{'line-height':'50rpx',color:'#4f4f4f', 'font-size':'30rpx','margin-top':'140rpx'}" v-model="form.ext" placeholder="您可以在这里输入您的
其它要求，
比如偏好香调、雷区香调
需要一种什么样的香气等等
也可以留白让AI自由发挥哦!" height="250"></u--textarea>
						</view>
						<view style="width: 85%; margin: 100rpx auto 0 auto;" class="item submitbtn ac1" @click.stop="page11next()">
							<view style="text-align: center;width: 100%;">获取配方</view>
						</view>
					</view>
					<view class="back" @click="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
					
					
				</div>
			</z-swiper-item> -->
			
			<z-swiper-item>
				<!--第11页 之后可以调换位置--> 
				 
				<view class="page  page11"> 
					<view class="bg">
						<image :src="imgHost + '/statics/assets/c11bg.png'" style="margin-top:8px"  mode="widthFix"></image>
					</view>
				 
					<!-- :class="active11 == 11?'ac list':'list'" -->
					<view class="cItemBox" :class="active == 10?'ac list':'list'" >
						<view class=" itemtit">
							 <!-- <view class="title" >请选择您能够接受的 <br />	AI 调配自由程度 </view> -->
							 <image :src="imgHost + '/statics/assets/10.png'"  style="width: 100%; padding: 220rpx 0 140rpx 0;" mode="widthFix"></image>
						</view>
						<view >
							<view class="item item3" style="width: 100%;" >
								<image :src="imgHost + '/statics/assets/c11line.png'" class="c11 ac2" style="width: 60%; height: 80rpx;"  mode="widthFix"></image> 
							</view>
							<view class="item item3" @click.stop="clickDialog"> 
								<image :src="imgHost + '/statics/assets/c111.png'"  class="cllImg ac1"  mode="widthFix"></image>
							</view>  
							<view class="item item3 " style="width: 100%;" >
								<image :src="imgHost + '/statics/assets/c11line.png'" class="c11 ac2" style="width: 60%; height: 80rpx;"  mode="widthFix"></image> 
							</view>
							<view class="item item3 " @click.stop="submit(2,0)"> 
								<image :src="imgHost + '/statics/assets/c112.png'"  class="cllImg ac1"  mode="widthFix"></image>
							</view>
							
							<view class="item item3 "  style="width: 100%;">
								<image :src="imgHost + '/statics/assets/c11line.png'" class="c11 ac2" style="width: 60%; height: 80rpx;"  mode="widthFix"></image> 
							</view>
							<view class="item item3 " @click.stop="submit(3,0)"> 
								<image :src="imgHost + '/statics/assets/c113.png'"  class="cllImg ac1"  mode="widthFix"></image>
							</view> 
						</view> 
					</view>
					<view class="back" @click="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
					 
				</view>
				
			</z-swiper-item>
			
	<!-- 		<z-swiper-item>
				<div class="page page11">
					<view class="bg">
						<image :src="imgHost + '/statics/assets/f5.png'"  mode="widthFix"></image>
					</view>
					<view class="list ac">
						<view class="item itemtit">
							请选择您能够接受的<br />
							Al调配自由程度

						</view>
						<view class="item2">
							<view class="l ac3">
								<image :src="imgHost + '/statics/assets/f4.png'" mode="widthFix"></image>
							</view>
							
						</view>
						<view class="item" @click="submit(1)">
							<image :src="imgHost + '/statics/assets/f1.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<view class="l ac3">
								<image :src="imgHost + '/statics/assets/f4.png'" mode="widthFix"></image>
							</view>
							
						</view>
						<view class="item" @click="submit(2)">
							<image :src="imgHost + '/statics/assets/f2.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="item2">
							<view class="l ac3">
								<image :src="imgHost + '/statics/assets/f4.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="item" @click="submit(3)">
							<image :src="imgHost + '/statics/assets/f3.png'" style="width: 100%;" mode="widthFix"></image>
						</view>
					</view>
					<view class="back" @click="backprev()">
						<u-icon name="arrow-up" color="#fff" size="22"></u-icon>
					</view>
				</div>
			</z-swiper-item> -->
			<z-swiper-item>
				<div class="page page10">
					<!--
					<view class="loading">
						<image :src="imgHost + '/statics/assets/a2.gif'" mode="widthFix"></image>
					</view>-->
				</div>
			</z-swiper-item>
		</z-swiper>
		
		<!--偏好的调香  -->
		<u-modal :show="pianShow" mode="center" class="pianWrapper" :showConfirmButton='false' @close="pianShow=false"  :footer='null'>
			<view class="pianCon">
				<view class="til">您有偏好的香调吗?</view> 
				<view class="pianBox">
					<view :class="'lineBlock '+item.ai_class" v-for="(item,index) in spiceCategoryList" :key="index" @click="submit(1,item.id)">{{item.ai_name}}</view>
					<view class="lineBlock lineBlock5" @click="submit(1,0)">不清楚，由AI帮我选择</view>
				</view>  
			</view>
		 </u-modal>
		 

	</view>
</template>
<script>
	import {create} from '@/api/hash';
	import {getCategory} from '@/api/spice';
	import {HTTP_REQUEST_URL} from '@/config/app';
	export default {
		data() {
			return {
				spiceCategoryList : [],
				imgHost : '',
				list:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
				options:{
						effect: 'fade',
						speed:1500,
						noSwiping:true,
						 autoHeight: true,
						fadeEffect: {
							crossFade: true
						},
					},
				multiRange:[
						['E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I','E','I'],
						['S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N','S','N'],
						['T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F','T','F'],
						['J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P','J','P'],
					],
				page3:0,
				page3a:0,
				page3b:0,
				page5:0,
				page8:0,
				active11:0,
				tip: '',
				active : 0,
				jindu : 100,
				timu1 : 0,
				born : '',
				job : '',
				active1 : 0,
				doing : '',
				show : false,
				zSwiperRef : null,
				mtbiType : 0,
				id : 0,
				playBgmInterval : null,
				form : {
					'gender' : '',
					'born' : '2000-06-15',
					'job' : '',
					'interesting' : '',
					'mtbi' : '',
					'relation' : '',
					'mtbi1' : '',
					'ext' : '',
					'mtbi2' : '',
					'mtbi3' : '',
					'mtbi4' : '',
					'type' : 3
				},
				pianShow:false
			};
		},
		onShow(){
			uni.$on('gotoOrder',(e) =>{
				this.$refs.zSwiperRef.swiper.slideTo(1);
				this.jindu = 0;
				this.form = {
					'gender' : '',
					'born' : '2000-06-15',
					'job' : '',
					'interesting' : '',
					'mtbi' : '',
					'relation' : '',
					'mtbi1' : '',
					'ext' : '',
					'mtbi2' : '',
					'mtbi3' : '',
					'mtbi4' : '',
					'type' : 3
				};
			});
		},
		onLoad(options) {
			this.imgHost = HTTP_REQUEST_URL;
			this.id = options.id || 0;
			this.form.id = this.id;
			/*
			actionLog({"url" : 'pages/tiaopei3/tiaopei3','mark' : ''}).then(res =>{
				
			}).catch( e =>{
				
			});*/
			this.bgm1 = uni.createInnerAudioContext();
			this.bgm2 = uni.createInnerAudioContext();
			this.btn1 = uni.createInnerAudioContext();
			this.btn2 = uni.createInnerAudioContext();
			this.btn3 = uni.createInnerAudioContext();
			this.btn4 = uni.createInnerAudioContext();
			this.btn5 = uni.createInnerAudioContext();
			this.bgm1.autoplay = true;
			this.bgm1.src = 'https://diy.yaxel.cn/voice/Castle_Level_14_Ending0025.mp3';
			this.bgm2.src = 'https://diy.yaxel.cn//voice/Castle_Level_14_Ending0053.mp3';
			this.btn1.src = 'https://diy.yaxel.cn/voice/Castle_Global0051.mp3';
			this.btn2.src = 'https://diy.yaxel.cn/voice/Castle_Global0112.mp3';
			this.btn3.src = 'https://diy.yaxel.cn/voice/Castle_Global0196.mp3';
			this.btn4.src = 'https://diy.yaxel.cn/voice/Castle_Global0281.mp3';
			this.btn5.src = 'https://diy.yaxel.cn/voice/Castle_Global0292.mp3';
			
			this.bgm1.onEnded(() => {
			  this.bgm2.play()
			});
			
			this.bgm2.onEnded(() => {
			  this.bgm1.play()
			});
			this.playBgmInterval = setInterval(this.jindu1, 40);
			this.spiceCategory();
		},
		methods:{
			onChange(e){
				this.mtbiType = 1;
				this.form.mtbi = this.multiRange[0][e.detail.value[0]]+this.multiRange[1][e.detail.value[1]]+this.multiRange[2][e.detail.value[2]]+this.multiRange[3][e.detail.value[3]];
				this.page3 = 1;
				this.$refs.zSwiperRef.swiper.slideTo(10);
			},
			spiceCategory(){
				getCategory().then(res =>{
					this.spiceCategoryList = res.data;
					console.log(this.spiceCategoryList);
				}).catch(e =>{
					
				})
			},
			playbgm1(e){
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../audio/bgm1.mp3';
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			playbgm2(e){
				bgm2.value.method = 'play'
			},
			jindu1(){
				if (this.jindu < 100) {
					this.jindu++;
				} else {
					this.show = true;
					this.bgm1.play();
					clearInterval(this.playBgmInterval);
				}
			},
			slideTo(){
				console.log(this.$refs.zSwiperRef);
				this.bgm1.play()
				this.btn1.play()
				this.active1 = 1;
				if (this.jindu < 100) {
					this.jindu++;
				} else {
					if (this.$refs.zSwiperRef) {
						this.$refs.zSwiperRef.swiper.slideTo(1);  
					}
				}
			  
			},
			page2next(e){
				//timu1.value = e
				this.form.gender = e;
				let that = this
				this.$refs.zSwiperRef.swiper.slideTo(2); 
				this.btn2.play()
			},
			page3next(e){
				this.form.born = e.detail.value;
				this.page3b = 1
				this.$refs.zSwiperRef.swiper.slideTo(3); 
				
				this.btn1.play()
			},
			page4next(){
				
				if (this.form.job == '') {
					uni.showToast({
						icon:'none',
						title:'请输入您的工作'
					})
				} else{
					this.page3a = 1 
					this.$refs.zSwiperRef.swiper.slideTo(4);
					this.page3b = 0
				}
				this.btn4.play()
			},
			page5next(){
				if (this.form.interesting == '') {
					uni.showToast({
						icon:'none',
						title:'请输入你空闲时候喜欢做的事'
					})
				} else{
					this.page3 = 1
					this.page3a = 0
					this.$refs.zSwiperRef.swiper.slideTo(5);
					this.page3 = 0
				
				}
				this.btn5.play()
			},
			page6next(e){
				if (e == 0) {
					this.mtbiType.value = 1;
					uni.showModal({
						title:'填写您的mbti',
						content:'',
						editable:true,
						placeholderText:'填写您的mbti',
						success: function (input) {
								if (input.confirm) {
									
									this.$refs.zSwiperRef.swiper.slideTo(6); 
									this.form.mtbi = input.content;
									this.page3 = 1;
								   return false;
								} else if (res.cancel) {
									this.mtbiType = 0;
									console.log('用户点击取消');
								}
							}
					})
				} else if (e == 1){
					this.mtbiType = 0;
					this.page3 = 1
					this.$refs.zSwiperRef.swiper.slideTo(6); 
				}
				this.btn1.play()
			
			},
			page7next(e,v){
				this.page3 = 1
				this.form.mtbi4 = v;

				this.$refs.zSwiperRef.swiper.slideTo(7); 
				this.btn1.play()
			},
			page8next(e,v){
				this.page8 = e
				this.form.mtbi1 = v;
				this.$refs.zSwiperRef.swiper.slideTo(8); 
				this.btn3.play()
			},
			page9next(e,v){
				this.page3 = 1
				this.page8 = 0
				this.form.mtbi2 = v;
				this.$refs.zSwiperRef.swiper.slideTo(9); 
				this.btn4.play()
			},
			page10next(e,v) {
				this.page3 = 0
				this.form.mtbi3 = v;
				this.$refs.zSwiperRef.swiper.slideTo(10); 
				this.btn5.play()
			},
			page11next () {
				this.active11 = 11
				this.$refs.zSwiperRef.swiper.slideTo(11); 
			},
			backprev() {
				this.page3 = 0
				this.page8 = 0
				this.active11 = 0
				this.$refs.zSwiperRef.swiper.slidePrev();
				this.btn3.play()
				
			},
			slideChangeTransitionEnd(){
				this.active = this.$refs.zSwiperRef.swiper.activeIndex
			
				if (this.$refs.zSwiperRef.swiper.activeIndex == 12 && this.mtbiType == 0) {
						this.form.mtbi = this.form.mtbi1 + this.form.mtbi2 + this.form.mtbi3 + this.form.mtbi4;
						let submit = false;
						if ( submit ) return false;
						submit = true;
						createTiaopei(this.form).then(res => {
							uni.navigateTo({
								url:'/pages/tiaopei4/tiaopei4?id='+res.data.id+'&type=1'
							})
						}).catch(e => {
							//this.toast(e);
							uni.showToast({
								icon:'none',
								'title':e.msg
							})
						})
						
				} else if(this.$refs.zSwiperRef.swiper.activeIndex == 6){
						
						this.page3 = 0
				} else if(this.$refs.zSwiperRef.swiper.activeIndex == 7){
						this.page3 = 0
				}else{
					
				}
			},
			submit(type,category){
				this.form.type = type;
				this.form.spice_category = category || 0;
				let submit = false;
				if ( submit ) return false;
				submit = true;
				if (this.mtbiType == 0){
					this.form.mtbi = this.form.mtbi1+this.form.mtbi2+this.form.mtbi3+this.form.mtbi4;
				}
				
				create(this.form).then(res => {
					if ( this.form.type == 3 ){
						uni.navigateTo({
							url:'/pages/tiaopei4/tiaopei4?action=official&master_id='+res.data.master_id + '&id='+res.data.id
						})
						return false;
					}
					this.$util.JumpPath('/pages/tiaoxiang/confirm?id=' + res.data.id);
					console.log(res);
				}).catch(e => {
					
					uni.showToast({
						icon:'none',
						'title':e.msg
					})
				})
				
			},
			clickDialog(){ 
				this.pianShow = true
			}
		 
			
		}
	}
</script>

<style lang="scss">
	page {
	
		padding: 0rpx 0rpx;

	}

	.con {
		
	}

	@keyframes leftzoom2 {
		0% {
			right: -220rpx;
		}

		100% {
			right: 0;
		}
	}
	@keyframes centerzoom {
		0% {
			transform: scale(1);
		}
		100%{
			transform: scale(1.7);
		}
		
	}
	@keyframes centerzoom3 {
		0% {
			transform: scale(1);
		}
		100%{
			transform: scale(9);
		}
		
	}
	@keyframes centerzoom4 {
		0% {
			transform: scale(1);
			
		}
		100%{
			transform: scale(2);
		}
	
	}
	@keyframes centerzoom5s {
		0% {
			transform: scale(1) translateX(0%);
			
		}
		100%{
			transform: scale(2) translateX(0%);
		}
	
	}
	@keyframes centerzoom5 {
		0% {
			transform: scale(1);
		}
		50%{
			transform: scale(40);
		}
		100%{
			transform: scale(40);
		}
		
	}
	@keyframes centerzoom2 {
		0% {
			transform: scale(1);
		}
		50%{
			transform: scale(2);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes trlr {
		0% {
			transform: translate(0,0);
		}
		50%{
			transform: translate(50%,-50%);
		}
		100% {
			transform: translate(0,0);
		}
	}
	@keyframes trlr2 {
		0% {
			transform: translate(0,0);
		}
		50%{
			transform: translate(0%,-30%);
		}
		100% {
			transform: translate(0,0);
		}
	}
	.hei{
		width: 0;
		height: 0;
		
		transition: all 1s ease-in;
		background: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
	}
	.hei2{
		width: 100vw;
		height: 100vh;
	
		transition: all 1s ease-in;
	}
	.submitbtn{
		/*background-image: url('~@/assets/e23.png'');*/
		background-repeat: no-repeat;
		color: #FFF;
		background-size: cover;
		height: 70rpx;
		display: flex;
		align-items: center;
		text-align: center;
		width: 100%;
	}
	.page{
		height: 100vh;
		position: relative;
		z-index: 11;
		overflow: hidden;
		.back{
			position: fixed;
			right: 10px;
			bottom: 50rpx;
			z-index: 11;
			border: 1px solid #fff;
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #333;
			animation: trlr2 3s  infinite  ;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89);
		}
		.back2{
			position: absolute;
			right: 10vw;
			bottom: 20vh;
			z-index: 11;
	
			border-bottom: 1px solid #333;

			display: flex;
			align-items: center;
			justify-content: center;
			
			animation: trlr2 3s  infinite  ;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89);
		}
	}
	.page1 {
		padding: 0 40rpx;
		overflow: hidden;
		padding-top: 12vh;
		background-color: #000;
		.logo {
			display: flex;
			justify-content: center;
			margin-bottom: 10vh;
		}

		.jindu {
			margin-bottom: 5vh;

			.t {
				color: #fff;
				font-size: 32rpx;
				text-align: right;
				letter-spacing: 2rpx;
				margin-bottom: 30rpx;
				opacity: 1;
				position: relative;
				z-index: 3;

				.lefo {
					position: relative;
					right: -220rpx;
				}

				&::after {
					content: '';
					position: absolute;
					right: -200rpx;
					bottom: -34rpx;
					width: 150rpx;
					background-color: #fff;
					height: 4rpx;
					z-index: 3;
				}
			}

			.ac2 {
				.lefo {
					animation: leftzoom2 0.3s linear 0s 1 alternate;
					animation-fill-mode: forwards;
				}

				&::after {
					animation: leftzoom2 0.3s linear 0s 1 alternate;
					animation-fill-mode: forwards;
				}
			}

			.m {
				background-color: #000;
				height: 4rpx;
				margin-bottom: 30rpx;

				.pro {
					height: 4rpx;
					background-color: #222;
					position: relative;

					view {
						color: #fff;
						font-size: 28rpx;
						position: absolute;
						right: 0;
						top: -55rpx;
					}
				}
			}

			.b {
				display: flex;
				justify-content: flex-end;
				opacity: 0;
			}
		}

		.wenan {
			opacity: 0;

		}

		@keyframes fadein {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		.ac1 {

			animation: fadein 1s linear 0s 1 alternate;
			animation-fill-mode: forwards;

		}
	}
	.page2{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 0%;
			top: 0%;
			transform-origin: center;
			
			image{
				width: 100%;
			}
		}
		.wo{
			animation: centerzoom 15s 0s infinite  ;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89);
			animation-fill-mode: forwards;
		}
		.bg1{
			width: 100%;
			position: absolute;
			left: 0%;
			top: 0%;
			transform-origin: center;
			
			image{
				width: 100%;
			}
		}
		.wo1{
			animation: centerzoom3 10s linear alternate ;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89);
			animation-fill-mode: forwards;
		}
		
		.list{
			padding-top: 14vh;
			position: relative;
			z-index: 2;
			width: 100%;
			.item{
				margin-bottom: 20rpx;
			}
			.item:last-child{
				margin-top: 30rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
		}
	}
	@keyframes slowleft {
		0% {
			transform: translateX(-100%);
		}
		100%{
			transform: translateX(100%);
		}

	}

	@keyframes slowright {
		0% {
			transform: translateX(100%);
		}
		100%{
			transform: translateX(-100%);
		}
		
	}
	@keyframes fastleft {
		0% {
			transform: translateX(-100%);
		}
		100%{
			transform: translateX(200%);
		}
		
	}
	.textarea{
		margin: 0 150rpx;
		box-shadow: #000 16rpx 16rpx;
		
	}
	.wo1a{
		transition: all 1s ease-in;
		transform: translateY(-100%) scale(3);
	}
	.page3{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 0%;
			top: 0%;
			image{
				width: 100%;
				height: 100vh;
			}
			view{
				display: none;
			}
			.item1{
				animation: slowleft 10s linear  infinite  ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			.item5{
				animation: slowleft 10s linear 2s infinite  ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			.item2{
				animation: slowright 10s linear infinite ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			.item9{
				animation: slowright 10s linear 5s infinite  ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			.item3{
				animation: fastleft 8s linear infinite ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			
			.item8{
				animation: fastleft 8s linear 2s infinite ;
				animation-fill-mode: forwards;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: block;
			}
			
			
		}
		.wo{
			
			.item1{
				animation: centerzoom5s 3s linear alternate !important;
				transform-origin: center !important;
				animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
				animation-fill-mode: forwards;
			}
			
			.item2,.item3{
				animation: centerzoom5s 3s linear alternate 0.1s !important;
				transform-origin: center !important;
				animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
				animation-fill-mode: forwards;
			}
			.item5,.item8,.item9{
				display: none;
			}
		}
		
		.list{
			padding-top: 10vh;
			position: relative;
			z-index: 2;
			.item{
				position: relative;
				.text{
					position: absolute;
					left: 0;
					width: 426rpx;
					top: 0;
					right: 0;
					margin: 0 auto;
					color: #9a9797;
					font-size: 28rpx;
					text-align: center;
					height: 70rpx;
					display: flex;
					align-items: center;
					input{
						width: 100%;
						color: #fff;
						text-align: center;
						height: 70rpx;
						font-size: 28rpx;
						font-style: normal;
					}
				}
			}
		}
	}
	.wo2a{
		transition: all 1s ease-in;
		transform: rotateX(270deg);
	}
	.page4{
		background-color: #f6f5f1;
		width: 100%;
		height: 100vh;
		position: relative;
		
		.bg{
			width: 100%;
			position: absolute;
			left: 30%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			image{
				width: 50%;
			}
		}
		.wo1{
			animation: centerzoom3 10s linear alternate ;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89);
			animation-fill-mode: forwards;
		}
		.list{
			padding-top: 17vh;
			position: relative;
			z-index: 2;
			.item{
				margin-bottom: 20rpx;
			}
			.item:last-child{
				margin-top: 30rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			.item2{
				position: relative;
				margin-bottom: 30rpx;
				.text{
					position: absolute;
					left: 0;
					width: 426rpx;
					top: 0;
					right: 0;
					margin: 0 auto;
					color: #fff;
					text-align: center;
					height: 70rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					input{
						width: 100%;
						color: #fff;
						text-align: center;
						height: 70rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.page5{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		
		.bg{
			width: 100%;
			position: absolute;
			left: 0%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			transform-origin: left center;
			animation: centerzoom 25s linear infinite  ;
			animation-fill-mode: forwards;
			
			image{
				width: 50%;
			}
		}
		.round{
			width: 50rpx;
			height: 50rpx;
			background-color: #000;
			position: absolute;
			left: 50%;
			top: 50%;
			border-radius: 50%;
			transform: scale(0);
			z-index: 33;
		}
		.wo{
			animation: centerzoom5 2s linear alternate !important;
			transform-origin: center !important;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
			animation-fill-mode: forwards;
		}
		.list{
			padding-top: 17vh;
			position: relative;
			z-index: 2;
			.item{
				margin-bottom: 20rpx;
				
			}
			
			.item:last-child{
				margin-top: 30rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			.item2{
				position: relative;
				margin-top: 50rpx;
				.text{
					position: absolute;
					left: 0;
					width: 426rpx;
					top: 0;
					right: 0;
					margin: 0 auto;
					color: #fff;
					text-align: center;
					height: 70rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					input{
						width: 100%;
						color: #fff;
						text-align: center;
						height: 70rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	
	.page6{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 5%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			transform-origin: center;
			animation: trlr 15s linear infinite  ;
			animation-fill-mode: forwards;
			image{
				width: 50%;
			}
		}
		.wo{
			left: 45%;
			top: 30%;
			
			animation: centerzoom4 6s linear alternate !important;
			transform-origin: center !important;
			animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
			animation-fill-mode: forwards;
		}
		
		.list{
			padding-top: 17vh;
			position: relative;
			z-index: 2;
			.item{
				margin-bottom: 40rpx;
			}
			.itemtit{
				margin-bottom: 120rpx;
			}
			.item:last-child{
				margin-top: 30rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			.item2{
				position: relative;
				margin-top: 50rpx;
				.text{
					position: absolute;
					left: 0;
					width: 426rpx;
					top: 0;
					right: 0;
					margin: 0 auto;
					
					input{
						width: 100%;
						color: #fff;
						text-align: center;
						height: 70rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	@keyframes movetop {
		0% {
			transform: translateY(90vh);
		}
		50%{
			transform: translateY(40vh);
		}
		100% {
			transform: translateY(0);
		}
	}
	.page7{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 5%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			transform-origin: center;
			animation: trlr 10s linear infinite  ;
			animation-fill-mode: forwards;
			image{
				width: 50%;
			}
		}
		.list{
			padding-top: 17vh;
			position: relative;
			width: 100%;
			z-index: 2;
			.item{
				margin-bottom: 0rpx;
				transform: translateY(90vh);
				image{
					display: block;
				}
			}
			.itemtit{
				margin-bottom: 120rpx;
				transform: translateY(0vh);
			}
			.item:last-child{
				margin-top: 0rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			
			.item2{
				position: relative;
				margin-top: 50rpx;
				.text{
					position: absolute;
					left: 0;
					width: 426rpx;
					top: 0;
					right: 0;
					margin: 0 auto;
					
					input{
						width: 100%;
						color: #fff;
						text-align: center;
						height: 70rpx;
						font-size: 28rpx;
					}
				}
			}
		}
		.ac{
			.ac1{
				animation: movetop 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac2{
				animation: movetop 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: .5s;
			}
			.ac3{
				animation: movetop 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 1s;
			}
			.ac4{
				animation: movetop 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 1.5s;
			}
			.ac5{
				animation: movetop 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 2s;
			}
			.ac6{
				transform: translateX(90vw);
				animation: moveright 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac7{
				animation: fadein 1s linear 0s 1 alternate;
				animation-fill-mode: forwards;
			}
		}
	}
	@keyframes moveleft {
		0% {
			transform: translateX(-90vw);
		}
		100% {
			transform: translateX(0);
		}
	}
	.woro{
		animation: rotate1 2s linear alternate !important;
		transform-origin: center !important;
		animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
		animation-fill-mode: forwards;
	}
	@keyframes rotate1 {
		0% {
			transform: rotateZ(0deg) scale(1);
		}
		100% {
			transform: rotateZ(1360deg) scale(0);
		}
	}
	@keyframes moveleft {
		0% {
			transform: translateX(-90vw);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes moveright {
		0% {
			transform: translateX(90vw);
		}
		100% {
			transform: translateX(0);
		}
	}
	.page8{
		background-color: #f6f5f1;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 5%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			transform-origin: center;
			animation: trlr 15s linear infinite  ;
			animation-fill-mode: forwards;
			image{
				width: 50%;
			}
		}
		.list{
			padding-top: 17vh;
			position: relative;
			z-index: 2;
			image{
				display: block;
			}
			.item{
				
				margin-bottom: 0rpx;
				transform: translateY(90vh);
				image{
					display: block;
				}
			}
			.itemtit{
				margin-bottom: 120rpx;
				transform: translateY(0vh);
			}
			.item:last-child{
				margin-top: 0rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			.item2{
				display: flex;
				padding: 0 100rpx;
				justify-content: space-between;
				.l{
					width: 200rpx;
					transform: translateX(-90vw);
					image{
						width: 100%;
					}
				}
				.r{
					width: 200rpx;
					transform: translateX(90vw);
					image{
						width: 100%;
					}
				}
			}
			
			.item3{
				width: 570rpx;
				margin: 0 auto;
			}
		}
		.ac{
			.ac1{
				transform: translateX(90vw);
				animation: moveright 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac2{
				transform: translateX(-90vw);
				animation: moveleft 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac3{
				transform: translateX(-90vw);
				animation: moveleft 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac4{
				transform: translateX(90vw);
				animation: moveright 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			
		}
	}
	
	.page9{
		background-color: #fff;
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			position: absolute;
			left: 5%;
			right: 0;
			margin: 0 auto;
			top: 30%;
			
			transform-origin: center;
			animation: trlr 15s linear infinite  ;
			animation-fill-mode: forwards;
			image{
				width: 50%;
			}
		}
		.list{
			padding-top: 17vh;
			position: relative;
			z-index: 2;
			image{
				display: block;
			}
			.item{
				
				margin-bottom: 0rpx;
				
				image{
					display: block;
				}
			}
			.itemtit{
				margin-bottom: 60rpx;
			
			}
			.item:last-child{
				margin-top: 0rpx;
			}
			.on{
				background-color: #d8d8d8;
			}
			
			
			.item3{
				
				margin: 0 auto;
				margin-bottom: 100rpx;
			}
			.item4{
				display: flex;
				transform: translateX(90vw);
				justify-content: flex-end;
				image{
					width: 300rpx;
				}
			}
			.ac1{
				transform: translateX(100vw);
			}
			.ac2{
				transform: translateX(-100vw);
			}
			.ac3{
				transform: translateX(-100vw);
			}
			.ac4{
				transform: translateX(100vw);
			}
		}
		.ac{
			.ac1{
				
				animation: moveright 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac2{
				
				animation: moveleft 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac3{
			
				animation: moveleft 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			.ac4{
			
				animation: moveright 1s linear alternate;
				animation-fill-mode: forwards;
				animation-delay: 0s;
			}
			
		}
	}
	
	// .page11{ 
	// 	width: 100%;
	// 	position: relative;
	// 	.bg{
	// 		width: 100%;
	// 		position: absolute;
	// 		left: 0;
	// 		right: 0;
	// 		margin: 0 auto;
	// 		top: 370rpx;
			
	// 		image{
	// 			width: 530rpx;
	// 		}
	// 	}
	// 	.wo{
	// 		left: 45%;
	// 		top: 30%;
			
	// 		animation: centerzoom4 6s linear alternate !important;
	// 		transform-origin: center !important;
	// 		animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
	// 		animation-fill-mode: forwards;
	// 	}
	// 	.ac{
	// 		.ac1{
	// 			transform: translateX(90vw);
	// 			animation: moveright 1s linear alternate;
	// 			animation-fill-mode: forwards;
	// 			animation-delay: 0s;
	// 		}
	// 		.ac2{
	// 			transform: translateX(-90vw);
	// 			animation: moveleft 1s linear alternate;
	// 			animation-fill-mode: forwards;
	// 			animation-delay: 0s;
	// 		}
	// 		.ac3{
	// 			transform: translateX(-90vw);
	// 			animation: moveleft 1s linear alternate;
	// 			animation-fill-mode: forwards;
	// 			animation-delay: 0s;
	// 		}
	// 		.ac4{
	// 			transform: translateX(90vw);
	// 			animation: moveright 1s linear alternate;
	// 			animation-fill-mode: forwards;
	// 			animation-delay: 0s;
	// 		}
			
	// 	}
	// 	.list{
	// 		padding-top: 3vh;
	// 		position: relative;
	// 		z-index: 2;
	// 		.item{
	// 			margin-bottom: -4rpx;
	// 			padding: 0 80rpx;
	// 			margin-top: -4rpx;
	// 		}
	// 		.itemtit{
	// 			margin-top: 60rpx;
	// 			margin-bottom: 110rpx;
	// 			font-size: 60rpx;
	// 		}
			
	// 		.on{
	// 			background-color: #d8d8d8;
	// 		}
			
	// 		.item2{
	// 			display: flex;
	// 			justify-content: space-between;
	// 			.l{
	// 				width: 400rpx;
	// 				transform: translateX(-90vw);
	// 				image{
	// 					width: 100%;
	// 				}
	// 			}
	// 			.r{
	// 				width: 200rpx;
	// 				transform: translateX(90vw);
	// 				image{
	// 					width: 100%;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	
	
	.page10{
		background-color: #fff;
		height: 100vh;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.loading{
			width: 500rpx;
			image{
				width: 100%;
			}
		}
	}
	.woro2{
		animation: rotate2 5s linear alternate !important;
		transform-origin: center !important;
		animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
		animation-fill-mode: forwards;
	}
	@keyframes rotate2 {
		0% {
			transform:  scale(1);
			
		}
		100% {
			transform:  scale(3);
			background-color: #000;
		}
	}
	.woro4{
		animation: sc3 5s linear alternate !important;
		transform-origin: center !important;
		animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
		animation-fill-mode: forwards;
	}
	@keyframes sc3 {
		0% {
			transform:  scale(1);
			background-color: #000;
		}
		100% {
			transform:  scale(0);
			
		}
	}
	.woro3{
		animation: rotate3 1.8s linear alternate !important;
		transform-origin: center !important;
		animation-timing-function: cubic-bezier(.03,1.07,.61,.89) !important;
		animation-fill-mode: forwards;
	}
	@keyframes rotate3 {
		0% {
			transform:  rotateX(0deg);
			
		}
		100% {
			transform:  rotateX(90deg);
			background-color: #000;
		}
	}
	.page11{
		.bg{
			width: 100%;
			position: absolute;
			left: 0%;
			right: 0;
			margin: 0 auto;
			top: 28%; 
			transform-origin: left center;
			animation: centerzoom 25s linear infinite  ;
			animation-fill-mode: forwards; 
			image{
				width: 50%;
			}
		}
		.list{
			padding-top: 17vh;
		}
		.cItemBox{
			position: relative;
			min-height: 70vh; 
			.title{
				font-size: 52rpx;
				font-weight: bold;
				// letter-spacing: 2rpx;
				padding:18% 10% 17% 10%;
			} 
			.cllImg{
				width: 80%; 
				margin-top: -2rpx;
				padding-left:10%;
			}
			.ac1{ 
				margin-bottom: -2rpx;
			}  
			 
		}
		
		.ac{
			.item3{
				.ac1{
					transform: translateX(90vw);
					animation: moveright 1s linear alternate;
					animation-fill-mode: forwards;
					animation-delay: 0s; 
					margin-bottom: -2rpx;
				}
				.ac2{
					transform: translateX(-90vw);
					animation: moveleft 1s linear alternate;
					animation-fill-mode: forwards;
					animation-delay: 0s;
					margin-top: -2rpx; 
				} 
			}
			
		}
		 
	} 
	@keyframes moveleft {
		0% {
			transform: translateX(-90vw);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes moveright {
		0% {
			transform: translateX(90vw);
		}
		100% {
			transform: translateX(0);
		}
	}
	.toTop{
		position: absolute;
		left: 160rpx;
		top:100rpx
	}
	
	.pianCon{
		width: 100%;
		.til{
			text-align: center;
			padding: 20rpx 0 10rpx 0;
			font-size: 36rpx;
		}
		.pianBox{
			.lineBlock{
				margin: 0 40rpx;
				height: 80rpx; 
				border-radius: 20rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 20rpx 0;
				background-color: rgb(249, 222, 135); 
				color: #000;
			}
			.lineBlock2{
				background-color: rgb(255, 182, 199); 
			}
			.lineBlock3{
				background-color: rgb(244, 194, 141); 
			}
			.lineBlock4{
				background-color: rgb(157, 226, 197); 
			}
			.lineBlock5{
				background-color: rgb(53, 52, 52); 
				color: #fff;
			}
		}
		.pianWrapper .u-modal__button-group{
			display: none;
		}
	}
</style>